import styles from './login.css';
import { Form, Icon, Input, Button, Checkbox, Radio } from 'antd';
import React, { Component } from 'react';
import { _getuser, _getcaptch } from '@/api/api';
import { CheckboxChangeEvent } from '_antd@3.26.20@antd/lib/checkbox';
import { connect } from 'dva';
const validateLimit = (rule: any, value: string | any[], callback: (arg0: string | undefined) => void) => {
  // 自定义函数if判断的条件中加入对value的兼容判断
  console.log(rule,1,value,2,callback,3);
  
  if ( value == "undefined") {
    callback('验证码不能为空');
  } else {
    callback();
  }
}

const mapStateToProps = (state: { app: any }, ownProps: any) => {
  return state.app;
};
@Form.create({ name: 'normal_login' })
@connect(mapStateToProps)
class Login extends Component {
  state = {
    captch: '',
    username: '黄辉',
    password: '123456',
    code: '',
    uuid: '',
    value: 1,
  };
  //单选
  onChange1 = (e: { target: { value: any } }) => {
    console.log(e.target.value);

    this.setState({
      value: e.target.value,
    });
  };

  //登录
  handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    this.props.form.validateFields(async (err: any, values: any) => {
      if (!err) {
        console.log(values);
        this.props.dispatch({
          type: 'app/getlogin',
          action: {
            ...values,
            key: this.state.value,
            uuid: this.state.uuid,
          },
        });
      } else {
        let res = await _getcaptch();
        // console.log(res, 66666666666);

        this.setState({
          captch: `data:image/gif;base64,` + res.data.img, //拼接验证码
          uuid: res.data.uuid, //验证码接口获取uuid
        });
      }
    });
  };
  //多选
  onChange(e: CheckboxChangeEvent) {
    console.log(`checked = ${e.target.checked}`);
  }

  //    获取验证码
  async componentDidMount() {
    let res = await _getcaptch();
    console.log(res, 66666666666);

    this.setState({
      captch: `data:image/gif;base64,` + res.data.img, //拼接验证码
      uuid: res.data.uuid, //验证码接口获取uuid
    });
    this.props.dispatch({ type: 'app/updateuuid', action: res.data.uuid });
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <div className={styles.login}>
        <Form onSubmit={this.handleSubmit} className={styles.antform}>
          <h1 className={styles.title}>八维实训平台</h1>
          <Form.Item>
            {getFieldDecorator('username', {
              initialValue: '郭老师',
              rules: [{ required: true, message: '账号不能为空' }, ],
             
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="请输入账号"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              initialValue: '123456',
              rules: [{ required: true, message: '密码不能为空' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="请输入密码"
              />,
            )}
          </Form.Item>
          <Form.Item className={styles.yanbox}>
            {getFieldDecorator('code', {
              rules: [{ required: true, message: '验证码不能为空' },{
                validator: validateLimit
              }],
            })(
              <Input
                prefix={<Icon type="code" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="code"
                placeholder="请输入验证码"
                className={styles.yan}
              />,
            )}
            <img
              src={this.state.captch}
              alt=""
              onClick={() => {
                this.changeCaptch();
              }}
              className={styles.catch}
            />
          </Form.Item>
          <div className={styles.an}>
            <Checkbox
              onChange={e => {
                this.onChange(e);
              }}
            >
              记住密码
            </Checkbox>
            <Radio.Group onChange={this.onChange1} value={this.state.value}>
              <Radio value="student">学生</Radio>
              <Radio value="teacher">老师</Radio>
            </Radio.Group>
          </div>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={styles.loginbutton}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }

  //获取验证码
  async changeCaptch() {
    console.log(111111);

    let timer = new Date().getTime();
    console.log(timer);

    let url = await _getcaptch();
    this.setState({
      captch: `data:image/gif;base64,` + url.data.img,
    });
  }
}

export default Login;
